<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 95184
  Date: 2023/03/02
  Time: 下午 06:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <style>
        #div2 {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 700px;
        }

        #dialog {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(212, 212, 212, .5);
        }
    </style>
</head>
<body>
<p align="center" style="color: #ff4248; font-size: 80px"><b>员 工 展 示</b></p>
<div style="text-align: center">
    <button class="add_btn" onclick="showDialog()">添加</button>&nbsp;<a href="/home.jsp">返回首页</a>
</div>
<div style="margin-bottom: 10px; text-align: center ; font-size: 30px ; text-align:center;">
    员工名称：<input type="text" id="empName" style="height: 45px;padding: 7px; font-size: 20px">&nbsp;
    位置：<input type="text" id="province" style="height: 45px;padding: 7px; font-size: 20px">&nbsp;
    <input type="button" id="searchBtn" value="查询">
</div>
<table border="0" cellspacing="0" align="center" width="80%" style="font-size: 30px">
    <tr align="center" style='background-color:#ff4248;color: white;font-size: 40px'>
        <td>员工编号</td>
        <td>员工名称</td>
        <td>员工性别</td>
        <td>电话号码</td>
        <td>地址</td>
        <td>入职时间</td>
        <td>部门编号</td>
        <td>工资</td>
        <td>编辑</td>
    </tr>
    <tbody id="tbd">
    </tbody>
    <tr style='background-color:#ff5858 ; line-height: 30px ;' align="center">
        <td colspan="9">共<span id="total"></span>条<span id="maxPage"></span>页&nbsp;&nbsp;第<span id="pageNo"></span>页
            <a id="firstPage" href="javascript:void(0)">首页</a>&nbsp;
            <a id="prePage" href="javascript:void(0)">上一页</a>&nbsp;
            <a id="nextPage" href="javascript:void(0)">下一页</a>&nbsp;
            <a id="lastPage" href="javascript:void(0)">尾页</a>
        </td>
    </tr>
</table>
<div id="dialog" style="display:none;">
    <div id="div2" align="center">
        <h3 align='center'>部门添加/更新</h3>
        <hr>
        <div id="empidD">员工编号<input type="text" readonly id="empid" name="empId"></div>
        <div id="addInput">
            员工名称:<input type="text" name="empName" id="add_emp_name"><br>
            员工性别:<input type="text" name="sex" id="add_sex"><br>
            电话号码:<input type="text" name="phoneNum" id="add_phone_num"><br>
            地址: <input type="text" name="province" id="add_province"><br>
            入职时间:<input type="text" name="hireDate" id="add_hire_date"><br>
            部门编号:<input type="text" name="deptNo" id="add_dept_no"><br>
            员工工资:<input type="text" name="salary" id="add_salary"><br>
            员工密码:<input type="text" name="password" id="add_password">
        </div>
        <div>
            <input type="button" id="updatebtn" value="修改" style="display: none">
            <input type="button" id="addbtn" value="添加">
            <button id="quxiao" onclick="disshowDialog()">取消</button>
        </div>
    </div>
</div>
<script>
    //定义全局变量，让各个方法都可以调用
    let pageNo = 1, maxPage = 0, total = 0, empName = '', province = '';
    //jquery初始化方法   需要页面初始化加载的代码放入这里面，相当于onload
    $(function () {
        // alert(111);
        //调用封装方法
        loadData();
        //首页点击事件
        $("#firstPage").click(function () {
            pageNo = 1;
            loadData();
        });
        //上一页点击事件
        $("#prePage").click(function () {
            pageNo--;
            loadData();
        });
        //下一页点击事件
        $("#nextPage").click(function () {
            pageNo++;
            loadData();
        });
        //尾页点击事件
        $("#lastPage").click(function () {
            pageNo = maxPage;
            loadData();
        });
        //查询点击事件
        $("#searchBtn").click(function () {
            empName = $("#empName").val();
            province = $("#province").val();
            loadData();
        });
    });

    //加载数据方法
    function loadData() {
        //使用jquery的ajax从后台获取数据
        $.ajax({
            url: "/EmpServlet/queryPage",//请求的地址
            type: "get",//请求方式
            data: {pageNo: pageNo, empName: empName, province: province},//请求携带的参数
            dataType: "json",//定义返回值格式
            success: function (data) {//成功回调函数  data=返回的json对象
                //清除原有数据
                $("#tbd").empty()
                //判断data是否有值
                if (data != null && data != '' && data != 'undefined' && data != 'null') {
                    //给总条数赋值
                    $("#total").html(data.total);
                    $("#maxPage").html(data.maxPage);
                    $("#pageNo").html(data.pageNo);
                    //给maxPage赋值
                    maxPage = data.maxPage;
                    //给total赋值
                    total = data.total;
                    pageNo = data.pageNo;
                    //获取对象列表信息 循环遍历
                    for (let i = 0; i < data.mapList.length; i++) {
                        const mapList = data.mapList[i];
                        if (i % 2 == 0) {
                            $("#tbd").append("<tr align='center' style='background-color:#ffffff'><td>" + mapList.empId + "</td>" +
                                "<td>" + mapList.empName + "</td><td>" + mapList.sex + "</td><td>" + mapList.phoneNum + "</td>" +
                                "<td>" + mapList.province + "</td><td>" + mapList.hireDate + "</td><td>" + mapList.deptNo + "</td>" +
                                "<td>" + mapList.salary + "</td><td>" +
                                "<a href='javascript:update(" + mapList.empId + ")'>更新</a>&nbsp;&nbsp;" +
                                "<a href='javascript:del(" + mapList.empId + ")'>删除</a></td>" +
                                "</tr>");
                        } else {
                            $("#tbd").append("<tr align='center' style='background-color:#cecece'><td>" + mapList.empId + "</td>" +
                                "<td>" + mapList.empName + "</td><td>" + mapList.sex + "</td><td>" + mapList.phoneNum + "</td>" +
                                "<td>" + mapList.province + "</td><td>" + mapList.hireDate + "</td><td>" + mapList.deptNo + "</td>" +
                                "<td>" + mapList .salary + "</td><td>" +
                                "<a href='javascript:update(" + mapList.empId + ")'>更新</a>&nbsp;&nbsp;" +
                                "<a href='javascript:del(" + mapList.empId + ")'>删除</a></td>" +
                                "</tr>");
                        }
                    }
                }
            },
            error: function (errorData) {
                alert("请求失败！");
            }
        });
    }

    //点击新增
    function showDialog() {
        $("#addInput").val("");
        dialog.style.display = "block";
        empidD.style.display = "none"
    }

    function disshowDialog() {
        dialog.style.display = "none";
    }

    //添加方法
    $("#addbtn").click(function () {
        $("#addInput").val("");
        updatebtn.style.display = "none";
        addbtn.style.display = "block";
        $.ajax({
                url: "/EmpServlet/add",		  //请求的路径，获取数据源
                type: "post",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                data: {
                    empId:$("#empid").val(),
                    empName: $("#add_emp_name").val(),
                    sex: $("#add_sex").val(),
                    phoneNum: $("#add_phone_num").val(),
                    province: $("#add_province").val(),
                    hireDate: $("#add_hire_date").val(),
                    deptNo: $("#add_dept_no").val(),
                    salary: $("#add_salary").val(),
                    password: $("#add_password").val(),
                },
                success: function (data) {
                    alert("添加成功");
                    disshowDialog();
                    loadData();
                }
            }
        )
    })

    //删除方法
    function del(empId) {
        if (confirm("您确定要删除吗？")) {
            $.ajax({
                url: "/EmpServlet/delete",
                type: "get",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                data: {empId: empId},
                success: function (data) {
                    alert(empId);
                    alert("删除成功");
                    loadData();
                }
            })
        }
    }

    //修改
    function update(empId) {
        showDialog();

        empidD.style.display = "block";
        updatebtn.style.display = "block";
        addbtn.style.display = "none";
        $.ajax({
            url: "/EmpServlet/queryById",
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: {empId: empId},
            success: function (data) {
                    $("#empid").val(empId),
                    $("#add_emp_name").val(data.empName),
                    $("#add_sex").val(data.sex),
                    $("#add_phone_num").val(data.phoneNum),
                    $("#add_province").val(data.province),
                    $("#add_hire_date").val(data.hireDate),
                    $("#add_dept_no").val(data.deptNo),
                    $("#add_salary").val(data.salary),
                    $("#add_password").val(data.password);
            },
            error: function (data) {
            }
        });
    }
    $("#updatebtn").click(function () {
        $.ajax({
                url: "/EmpServlet/update",		  //请求的路径，获取数据源
                type: "post",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                data: {
                    empId:$("#empid").val(),
                    empName: $("#add_emp_name").val(),
                    sex: $("#add_sex").val(),
                    phoneNum: $("#add_phone_num").val(),
                    province: $("#add_province").val(),
                    hireDate: $("#add_hire_date").val(),
                    deptNo: $("#add_dept_no").val(),
                    salary: $("#add_salary").val(),
                    password: $("#add_password").val(),
                },
                success: function (data) {
                    alert("更新成功");
                    disshowDialog();
                    loadData();
                }
            }
        )
    })

</script>
</body>
</html>
